<template>
    <view class="container">
        <view class="top-box">
            <fui-nav-bar
                style="--fui-color-border: transparent"
                splitLine
                background="transparent"
                isFixed
                isOccupy
                lineColor="transparent"
                ><fui-icon @click="leftClick" name="arrowleft"></fui-icon>
            </fui-nav-bar>
            <!-- <wxTopStatus @init="initTop"></wxTopStatus> -->

            <view class="avatar-info p-[30rpx]">
                <view class="info flex-between">
                    <!-- 头像 -->
                    <view class="info-left flex-column gap-[20rpx]">
                        <image :src="info.avatar" mode="scaleToFill" class="avatar" />
                        <view class="info-name"> {{ info.nickname || info.name }} </view>
                        <image
                            :src="getImg('/img/userHomePage/verified.png')"
                            mode="widthFix"
                            class="verified"
                            v-if="userStore.userInfo && userStore.userInfo.isRealNameAuthentication"
                        />
                    </view>
                    <!-- 关注 -->
                    <view class="info-right flex-row" v-if="!isSelf">
                        <image
                            @click.stop="
                                callPhoenFn(info.phone || info.contactPhone || info.bossPhone)
                            "
                            :src="$getImg('/img/userHomePage/callPhone.png')"
                            mode="scaleToFill"
                        />

                        <image
                            @click="toChat(info)"
                            :src="$getImg('/img/userHomePage/chat.png')"
                            mode="scaleToFill"
                        />
                        <view
                            class="follow flex-center"
                            :class="[
                                (
                                    ids.factoryId
                                        ? info.userBehaviorEcho.followShopFlag
                                        : info.userBehaviorEcho.followUserFlag
                                )
                                    ? 'active'
                                    : ''
                            ]"
                            @click="followFn"
                            >{{
                                (
                                    ids.factoryId && info.userBehaviorEcho
                                        ? info.userBehaviorEcho.followShopFlag
                                        : info.userBehaviorEcho.followUserFlag
                                )
                                    ? '已关注'
                                    : '+ 关注'
                            }}
                        </view>
                    </view>
                </view>
                <view class="itro-info">
                    {{ info.intro }}
                </view>

                <view class="list flex-row py-[30rpx]">
                    <view class="item flex-1 flex-center-column">
                        <view class="count">{{ info.fansCount }}</view>
                        <view class="name">粉丝</view>
                    </view>
                    <view class="item flex-1 flex-center-column">
                        <view class="count">{{ info.followCount }}</view>
                        <view class="name">关注</view>
                    </view>
                    <view class="item flex-1 flex-center-column">
                        <view class="count">{{ info.likeCount }}</view>
                        <view class="name">获赞</view>
                    </view>
                    <view class="item flex-1 flex-center-column">
                        <view class="count">{{ info.collectionCount }}</view>
                        <view class="name">收藏</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="interval"></view>
        <view class="bottom-box p-[30rpx]">
            <tabs
                :current="current"
                height="80"
                bar-width="60"
                :barStyle="{ bottom: '0', backgroundColor: '#2073F4' }"
                inactiveColor="#999999"
                activeColor="#3D3D3D"
                @change="tabChange"
                :top="topHeight + 'px'"
                :isFixed="true"
            >
                <tab v-for="(item, i) in tabList" :key="i" :name="item.name">
                    <!-- <view class="news-list pt-[20rpx]">
            <news-list :cid="item.id" :i="i" :index="current"></news-list>
          </view> -->
                </tab>
            </tabs>
            <!-- <view class="tabs flex-row gap-[40rpx] py-[20rpx]">
        <view>帖子 90</view>
        <view>视频 20</view>
        <view
          class="dot"
          :style="{
            transform: `translateX(${'1' === '1' ? 0 : '154rpx'})`,
          }"
        ></view>
      </view> -->
            <!-- 帖子 -->
            <view class="post" v-if="current === 0 && ids.uid">
                <view class="tag flex-row gap-[40rpx] py-[20rpx]">
                    <view
                        class="tag-item"
                        :class="{
                            active: postPage.params.bizTab === 1
                        }"
                        @click="bizTabSwitch(1)"
                    >
                        热门</view
                    >
                    <view
                        class="tag-item"
                        :class="{
                            active: postPage.params.bizTab === 2
                        }"
                        @click="bizTabSwitch(2)"
                    >
                        新发</view
                    >
                </view>
                <MeScrollPage
                    :config="{
                        down: {
                            // use: false,
                        },
                        height: 100
                    }"
                    type="body"
                    ref="meScrollPageRef"
                    :page="postPage"
                >
                    <forumList :data="postPage.data"></forumList>
                </MeScrollPage>
            </view>
            <!-- 视频 -->

            <MeScrollPage
                type="body"
                ref="meScrollPageRef"
                :page="vPage"
                v-if="(current === 1 && ids.uid) || (current === 0 && ids.factoryId)"
            >
                <videoGrid :data="vPage.data"></videoGrid>
            </MeScrollPage>
        </view>

        <!-- 产品 -->

        <MeScrollPage
            type="body"
            ref="meScrollPageRef"
            :page="page"
            v-if="current === 1 && ids.factoryId"
        >
            <view>
                <Waterfall ref="WaterfallRef" :data="page.data"></Waterfall>
            </view>
        </MeScrollPage>
    </view>
</template>

<script lang="ts" setup>
import Waterfall from '../../components/waterfall/index.vue'
import videoGrid from '../../components/videoGrid/index.vue'
import { callPhone, getImg, jump } from '@/utils/util'
import { getFactoryAPI } from '@/api/shop'
import { TUIUserService, TUIConversationService } from '@tencentcloud/chat-uikit-engine'
import { videoPage } from '@/api/video'
import { prodCategoryList, prodPage, prodCollect } from '@/api/home'
import { userActionAPI } from '@/api/common'
import { PageProps } from '@/hooks/usePage'
import { gethomepageAPI } from '@/api/my'
import { getPostListAPI } from '@/api/posts'
import { useUserStore } from '@/stores/user'
import { jumpChat } from '@/utils/loginTIm'
const bg = `url(${getImg('/img/userHomePage/userBg.png')})`
const params = reactive({
    bizTab: 1
})
const userStore = useUserStore()

const imId = ref('')

const toChat = (row: any) => {
    console.log('row', row, row.id)
    jumpChat(row.imUserId || row.syhId, !row.imUserId)

    // 切换会话 C2C + userId
}

const meScrollPageRef = ref()
const current = ref(0)
const topHeight = ref(0)
const initTop = (val: number) => {
    topHeight.value = val
}

const callPhoenFn = async (phone: string) => {
    if (userStore.userInfo.memberId) {
        callPhone(phone)
    } else {
        const r = await uni.showModal({
            title: '提示',
            content: '购买会员获得权益后即可使用此功能，是否需要购买？'
        })
        if (!r.confirm) return
        jump('/pages/member/member')
    }
}

const MSVideo = ref()
// 视频
const vPage = reactive<PageProps>({
    params: {
        // shopId: ''，
        type: 2
    },
    fetchData: undefined
})

// 帖子
const postPage = reactive<PageProps>({
    params: {
        uid: '',
        bizTab: 1
    },
    fetchData: getPostListAPI
})

// 是否为自己的主页
const isSelf = ref(false)

// 获取视频分页
// const getVideoFn = async () => {
//   const res = await videoPage({
//     // shopId: info.value.id
//     shopId: 1,
//   });
//   console.log(res);
// };
const info = ref({})

const leftClick = () => {
    uni.navigateBack()
}
const WaterfallRef = ref()
const waterResetLoad = () => {
    WaterfallRef.value && WaterfallRef.value.resetLoadmore()
}

// 产品
const page = reactive<PageProps>({
    params: {
        categoryId: '',
        shopId: ''
    },
    ascs: [],
    descs: [],
    data: [],
    fetchData: prodPage,
    beforeLoadingFn: waterResetLoad
})
// 各种id集合

const ids = reactive({
    factoryId: '',
    uid: ''
})

onLoad((op) => {
    console.log(op)
    // 获取工厂信息
    if (op!.factoryId) {
        ids.factoryId = op!.factoryId
        tabList.value = [
            {
                name: '视频',
                id: 0
            },
            {
                name: '产品',
                id: 1
            }
        ]
        getFactory(op!.factoryId)
        vPage.params.bindId = op!.factoryId
        vPage.fetchData = videoPage
        MSVideo.value.resetData()
    }
    // 获取用户信息
    if (op!.uid) {
        postPage.params.uid = op!.uid
        vPage.params.uid = op!.uid
        vPage.params.type = 2
        vPage.fetchData = getPostListAPI
        ids.uid = op!.uid

        userStore.userInfo && (isSelf.value = userStore.userInfo.userId === op!.uid)
        tabList.value = [
            {
                name: '帖子',
                id: 0
            },
            {
                name: '视频',
                id: 1
            }
        ]
        // 调用用户接口
        getHomePageInfo(op!.uid)
    }
})

// 关注
const followFn = async () => {
    console.log('关注111', info.value.userId)
    if (info.value.userBehaviorEcho.followShopFlag || info.value.userBehaviorEcho.followUserFlag) {
        const c = await uni.showModal({
            title: '提示',
            content: '您已关注该用户，是否取消关注？'
        })
        if (!c.confirm) return
    }
    userActionAPI({
        type: '4',
        action: ids.factoryId ? '41' : '44',
        bindId: ids.factoryId ? info.value.id : info.value.userId
    }).then((res) => {
        if (res.code === 0) {
            // info.value.isFollow = !info.value.isFollow;
            ids.factoryId ? getFactory(info.value.id) : getHomePageInfo(info.value.userId)
        }
    })
}

// 获取用户主页信息
const getHomePageInfo = async (uid: string) => {
    const res = await gethomepageAPI(uid)
    info.value = {
        ...res.data,
        ...res.data.user
    }
    console.log('用户主页信息', info.value)
}

// 获取工厂对象
const getFactory = (id: string) => {
    getFactoryAPI(id, { type: 1 }).then((res) => {
        if (res.code === 0) info.value = res.data
        // getVideoFn();
    })
}

const tabList = ref([
    // {
    //   name: "帖子",
    //   id: 1,
    // },
    {
        name: '视频',
        id: 2
    },
    {
        name: '产品',
        id: 3
    }
])
const tabChange = (val: number, item: any) => {
    console.log(val, item)
    page.params.shopId = info.value.id

    current.value = val
}

const bizTabSwitch = (val: number) => {
    postPage.params.bizTab = val
    meScrollPageRef.value.resetData()
}
</script>
<style lang="scss" scoped>
.container {
    .top-box {
        background: v-bind(bg) no-repeat;
        background-size: 100% 100%;
        .avatar-info {
            .info {
                padding-top: 1vh;

                .info-left {
                    .avatar {
                        width: 112rpx;
                        height: 112rpx;
                        border-radius: 999rpx;
                    }
                    .info-name {
                        font-size: 16px;
                        color: #333333;
                        font-weight: 700;
                    }
                    .verified {
                        width: 80rpx;
                    }
                }

                .info-right {
                    image {
                        width: 80rpx;
                        height: 80rpx;
                    }
                    .follow {
                        height: 58rpx;
                        background-color: #376af7;
                        border-radius: 999rpx;
                        color: #fff;
                        width: 120rpx;
                        margin-top: 6rpx;

                        &.active {
                            background-color: #e6edff;
                            color: #376af7;
                        }
                    }
                }
            }

            .itro-info {
                padding-top: 30rpx;
            }
            .list {
                .item {
                    gap: 6rpx;
                    & > view {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                    .count {
                        font-size: 16px;
                        color: #3d3d3d;
                        font-weight: 700;
                    }
                    .name {
                        font-size: 12px;
                        color: #999999;
                    }
                }
            }
        }
    }
    .interval {
        height: 20rpx;
        background-color: #f2f3f7;
    }

    .bottom-box {
        .tag {
            .tag-item {
                background-color: #f7f7f8;
                padding: 10rpx 30rpx;
                color: #4c5879;
                font-size: 13px;
                border-radius: 999rpx;
            }

            .active {
                background-color: #376af7;
                color: #fff;
            }
        }
    }
}
</style>
